<template>
  <div class="channel-edit">
    <van-cell :border="false" center>
      <div slot="title" class="title">我的频道</div>
      <van-button
        plain
        round
        size="mini"
        type="danger"
        class="channel-edit-btn"
        @click="isEditStatus = !isEditStatus"
        >{{ isEditStatus ? '完成' : '编辑' }}</van-button
      >
    </van-cell>
    <van-grid :gutter="10" class="my-channel" :border="false">
      <van-grid-item
        class="my-channel-item"
        v-for="(item, index) in myChannelList"
        :key="item.id"
        :class="{ active: index === active }"
        @click="onMyChannleItemClick(item, index)"
      >
        <van-icon
          name="clear"
          class="close-icon"
          v-if="isEditStatus && item.id !== 0"
        />
        {{ item.name }}
      </van-grid-item>
    </van-grid>
    <van-cell :border="false">
      <div slot="title" class="title">频道推荐</div>
    </van-cell>
    <van-grid :gutter="10" class="my-channel">
      <van-grid-item
        class="my-channel-item"
        v-for="item in recommendChannelList"
        :key="item.id"
        @click="onAddMyChannle(item)"
      >
        {{ item.name }}
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import {
  apiGetAllChannelData,
  apiAddChannelData,
  apiDeleteChannelData
} from '@/api/channel'
import { mapState } from 'vuex'
import { setItem, KEY_MAP } from '@/utils/storage'
export default {
  name: 'ChannelEdit',
  props: {
    myChannelList: {
      type: Array,
      require: true
    },
    active: {
      type: Number,
      require: true
    }
  },
  data() {
    return {
      allChannelList: [],
      isEditStatus: false
    }
  },
  computed: {
    ...mapState(['user']),
    // 推荐频道列表
    recommendChannelList() {
      return this.allChannelList.filter(item => {
        let flag = true
        flag = this.myChannelList.some(element => {
          return element.id === item.id
        })
        return !flag
      })
    }
  },
  created() {
    this.getAllChannelList()
  },
  methods: {
    async getAllChannelList() {
      const { data } = await apiGetAllChannelData()
      this.allChannelList = data.data.channels
    },
    // index 为 备选频道数组的index
    async onAddMyChannle(channelInfo) {
      this.myChannelList.push(channelInfo)

      // 如果登录了，存储线上
      if (this.user) {
        await apiAddChannelData({
          channels: [
            {
              id: channelInfo.id,
              seq: this.myChannelList.length
            }
          ]
        })
      } else {
        // 未登录 本地存储
        setItem(KEY_MAP.MY_CHANNEL, this.myChannelList)
      }
    },
    async onMyChannleItemClick(item, index) {
      // 根据 isEditStatus 来执行不同操作
      // false 执行 tab 跳转

      if (this.isEditStatus) {
        // 编辑状态下 推荐不能删除
        if (index === 0) return

        this.$emit('channelUpdated', index)
        this.myChannelList.splice(index, 1)

        // 如果登录了，存储线上
        if (this.user) {
          await apiDeleteChannelData(item.id)
        } else {
          // 未登录 本地存储
          setItem(KEY_MAP.MY_CHANNEL, this.myChannelList)
        }
      } else {
        this.$emit('channelClosed', index)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.channel-edit {
  padding-top: 54px;
  .title {
    font-size: 16px;
    color: #333333;
  }
  .channel-edit-btn {
    font-size: 12px;
    width: 50px;
  }
  .my-channel {
    margin-bottom: 16px;
    .my-channel-item {
      position: relative;
      /deep/ .van-grid-item__content {
        width: 80px;
        height: 43px;
        font-size: 14px;
        color: #222222;
        background-color: #f4f5f6;
        border-radius: 8px;
      }

      &.active {
        /deep/ .van-grid-item__content {
          color: #f85959;
        }
        .close-icon {
          color: #f85959;
        }
      }

      .close-icon {
        position: absolute;
        top: -5px;
        right: 5px;
        font-size: 16px;
        color: #999999;
      }
    }
  }
}
</style>
